<template>
	<view>
		<MenuItem v-for="(item, index) in menuList" :key="index" 
		:item="item" @cancleAll="cancleAll(item)" />
		
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue';
	import MenuItem from './MenuItem.vue'; // 假设我们将菜单项组件分离到一个单独的文件中
	import{ListType} from '../types/types'
	// 定义要向父组件发送的事件
	const emit = defineEmits(['update']);
	const cancleAll = (nowItem:ListType)=>{
	const clearSelection = (items: ListType[]) => {
		items.forEach((item:ListType)=>{
			// 清除所有项的选中状态
			item.isSelected = false;
			// 递归清除子项的选中状态
			if (item.children) {
				clearSelection(item.children);
			}
		});
	};
	
	// 清除所有项的选中状态
	clearSelection(menuList.value);
	
	// 只设置当前点击项的选中状态（如果是叶子节点）
	if (!nowItem.children) {
		nowItem.isSelected = true;
	}
}
	const menuList = ref<Array<ListType>>([
		{
			title:'Kitten Wardrobe',
			id:1,
			isSelected:true,
			// children:[
			// 	{
			// 		title:'Cute Fairy',
					
			// 		children:[
			// 			{title:'Zoo Keeper',children:[
			// 			{title:'Zoo Keeper',id:1,}
			// 		]}
			// 		]
			// 	},
			// 	{title:'Dopamine',children:[
			// 			{title:'Zoo Keeper',}
			// 		]}
			// ]
		},
		{title:'Cute Fairy',id:2,},
		{title:'Dopamine',id:3},
		{title:'Zoo Keeper',id:4},
		{title:'Lilybit Townlet',id:5},
		{title:'Buzzy Beauties',id:6},
		{title:'Funky Friends',id:7},
		{title:'Phone Protection',id:8},
		{title:'Good Luck Bag',id:9},
		{title:'Monkey King',id:10},
		{title:'Hary Glass',id:11},
		{title:'Data Link',id:12},
		{title:'Zoo Keeper'},
		{title:'Zoo Keeper'},
		{title:'Zoo Keeper'},
		{title:'Zoo Keeper'},
		{title:'Zoo Keeper'},
		{title:'Zoo Keeper'},
		{title:'Zoo Keeper'},
		{title:'Zoo Keeper'},
	])
	
</script>

<style scoped lang="less">
	
</style>